<template>
  <div class="form-builder">
    <div class="widget-panel" ref="WidgetPanelRef">
      <h2>选择题型</h2>
      <widgetContainer />

    </div>
    <div class="canvas-area">
      <a-layout>
        <a-layout-header :style="headerStyle" ref="ControlRef">

          <a class="header-menu" @click="handleImportJson">
            <DownloadOutlined /> 导入json
          </a>
          <input 
            ref="fileInputRef" 
            type="file" 
            accept=".json"
            style="display: none"
            @change="handleFileChange"
          />
          <a class="header-menu" @click="handleDeleteOut">
            <DeleteOutlined />清空
          </a>
          <a class="header-menu" @click="handlePreviewJson">
            <EyeOutlined />预览JSON
          </a>
          <a-modal v-model:open="previewJsonVisible" okText="copy" title="生成json"
            @ok="handleCopyJson(generateJsonTemplate)">
            <CodeEditor :value="generateJsonTemplate" language="json"  />
          </a-modal>
          <a class="header-menu" @click="handleSaveDraft">
            <SaveOutlined />保存稿件
          </a>
          <a class="header-menu" @click="handleNetworkTest">
            <WifiOutlined />网络测试
          </a>
          <a class="header-menu" @click="handleUpload" :class="{ 'loading': uploadLoading }" :style="{ opacity: uploadLoading ? 0.6 : 1, pointerEvents: uploadLoading ? 'none' : 'auto' }">
            <CloudUploadOutlined />{{ uploadLoading ? '发布中...' : '发布' }}
          </a>
        </a-layout-header>
      </a-layout>
      <!-- 可拖拽区组件，当控件拖入此区域后 触发事件 -->
      <canvasArea ref="canvasAreaRef" v-model:widgetForm="widgetForm" v-model:widgetFormSelect="widgetFormSelect" />

    </div>
    <div class="property-panel" ref="PropertyPanelRef">
      <a-tabs v-model:activeKey="tabSelectkey" size="large" :tabBarStyle="tabBarStyle" :tabBarGutter="50">
        <a-tab-pane class="tab-pane" key="1" tab="单题配置">
          <div v-if="widgetForm.list.length === 0">
            从左侧控件列表内拖拽至画布后显示其可编辑的属性
          </div>
          <div v-else>

            <AntdWidgetConfig v-model:select="widgetFormSelect" v-model:formConfig="widgetForm.config" />
          </div>
        </a-tab-pane>
        <a-tab-pane class="tab-pane" key="2" tab="问卷属性" force-render>
          <div v-if="widgetForm.list.length === 0">
            从左侧控件列表内拖拽至画布后显示其可编辑的属性
          </div>
          <div v-else>
            <AntdFormConfig v-model:config="widgetForm.config" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

  </div>

</template>

<script setup>
import AntdWidgetConfig from './AntdWidgetConfig.vue';
import AntdFormConfig from './AntdFormConfig.vue';
import CodeEditor from './components/CodeEditor.vue';
import { removeJsonProperties } from '../questionare/config/utils/convertToMiniApp.js'
const headerStyle = {
  textAlign: 'right',
  color: '#000',
  height: 40,
  paddingInline: 40,
  lineHeight: '64px',
  backgroundColor: '#fff',
  borderBottom: '1px solid #ccc'
};

const tabBarStyle = {
  width: '100%',
  // marginLeft:'30px'
}
import widgetContainer from './widgetContainer.vue';
import canvasArea from './canvasArea.vue';
import { ref, reactive, watch, createVNode, nextTick } from 'vue'
import { copy } from './config/utils';
import { message, Modal } from 'ant-design-vue';
import {
  DownloadOutlined,
  DeleteOutlined,
  EyeOutlined,
  SaveOutlined,
  CloudUploadOutlined,
  ExclamationCircleOutlined,
  WifiOutlined
} from '@ant-design/icons-vue';
import { antd } from './config';
import request from '@/http/request'
import axios from 'axios'
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm)))

const activeKey = ref(['1']);
// 预览json
const previewJsonVisible = ref(false);
const generateJsonTemplate = ref(JSON.stringify(widgetForm.value, null, 2))

// 画布区组件dom
const widgetFormSelect = ref(undefined);

const tabSelectkey = ref('1');
// 清空画布方法
const handleDeleteOut = () => {

  Modal.confirm({
    title: '你确定要清空?',
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode(
      'div',
      {
        style: 'color:red;',
      },
      '此操作，无法恢复！',
    ),
    onOk() {
      widgetForm.value.list = []
      widgetFormSelect.value = undefined
    },
    onCancel() {
      console.log('清空 Canceled! ');
    },
    class: 'test',
  });

}

//预览json数据
// 预览时显示完整的原始JSON数据
const handlePreviewJson = () => {
  // 预览时显示完整的原始JSON数据，不进行属性过滤
  generateJsonTemplate.value = JSON.stringify(widgetForm.value, null, 2);
  // 显示预览
  previewJsonVisible.value = true;
};
const handleCopyJson = (content) => {
  copy(content)
  message.success('复制成功')
}
// 漫游引导 
const WidgetPanelRef = ref(null);
const ControlRef = ref(null);
const canvasAreaRef = ref(null);

const PropertyPanelRef = ref(null);

// 文件输入引用
const fileInputRef = ref(null);

// 处理导入JSON按钮点击
const handleImportJson = () => {
  fileInputRef.value?.click();
};

// 处理文件选择
const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (!file) return;
  
  // 验证文件类型
  if (!file.name.endsWith('.json')) {
    message.error('请选择JSON格式的文件');
    return;
  }
  
  // 读取文件内容
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const jsonContent = JSON.parse(e.target.result);
      
      // 验证JSON结构是否符合问卷格式
      if (validateQuestionnaireJson(jsonContent)) {
        // 确认导入
        Modal.confirm({
          title: '确认导入',
          icon: createVNode(ExclamationCircleOutlined),
          content: '导入将覆盖当前问卷内容，是否继续？',
          onOk() {
            widgetForm.value = jsonContent;
            widgetFormSelect.value = undefined;
            message.success('JSON导入成功');
          },
          onCancel() {
            console.log('导入已取消');
          },
        });
      } else {
        message.error('JSON格式不符合问卷结构要求');
      }
    } catch (error) {
      message.error('JSON文件格式错误，请检查文件内容');
      console.error('JSON解析错误:', error);
    }
  };
  
  reader.onerror = () => {
    message.error('文件读取失败');
  };
  
  reader.readAsText(file);
  
  // 清空input值，允许重复选择同一文件
  event.target.value = '';
};

// 验证问卷JSON结构
const validateQuestionnaireJson = (json) => {
  // 基本结构验证
  if (!json || typeof json !== 'object') {
    return false;
  }
  
  // 检查必要的属性
  if (!json.hasOwnProperty('list') || !Array.isArray(json.list)) {
    return false;
  }
  
  if (!json.hasOwnProperty('config') || typeof json.config !== 'object') {
    return false;
  }
  
  return true;
};

// 添加上传状态管理
const uploadLoading = ref(false);

// API响应验证辅助函数
const validateApiResponse = (response) => {
  // 检查响应是否包含必要的字段
  if (!response || typeof response !== 'object') {
    return { valid: false, error: '无效的响应格式' };
  }
  
  // 检查是否包含code字段
  if (!response.hasOwnProperty('code')) {
    return { valid: false, error: '响应缺少状态码' };
  }
  
  // 检查是否包含message字段
  if (!response.hasOwnProperty('message')) {
    return { valid: false, error: '响应缺少消息字段' };
  }
  
  return { valid: true };
};

// 数据预处理函数，确保符合 API 期望格式
const preprocessDataForApi = (data) => {
  const processed = JSON.parse(JSON.stringify(data)); // 深拷贝
  
  // 确保 config 字段存在且格式正确
  if (!processed.config) {
    processed.config = {};
  }
  
  // 确保必要的 config 字段
  if (!processed.config.title) {
    processed.config.title = '未命名问卷';
  }
  
  if (!processed.config.category) {
    processed.config.category = 'cat_default';
  }
  
  if (!processed.config.description) {
    processed.config.description = '默认问卷描述';
  }
  
  if (!processed.config.status) {
    processed.config.status = 'draft';
  }
  
  if (typeof processed.config.submitLimit === 'undefined') {
    processed.config.submitLimit = 0;
  }
  
  if (typeof processed.config.totalScore === 'undefined') {
    processed.config.totalScore = 0;
  }
  
  // 确保 list 字段存在且格式正确
  if (!processed.list || !Array.isArray(processed.list)) {
    processed.list = [];
  }
  
  // 处理每个问题的格式
  processed.list = processed.list.map((question, index) => {
    const processedQuestion = { ...question };
    
    // 确保必要字段存在
    if (!processedQuestion.key) {
      processedQuestion.key = `question_${Date.now()}_${index}`;
    }
    
    if (!processedQuestion.sort) {
      processedQuestion.sort = (index + 1) * 10;
    }
    
    if (!processedQuestion.model) {
      processedQuestion.model = `${processedQuestion.type}_${processedQuestion.key}`;
    }
    
    // 处理选项格式
    if (processedQuestion.options && processedQuestion.options.options) {
      processedQuestion.options.options = processedQuestion.options.options.map((option, optIndex) => {
        return {
          value: option.value || `option_${optIndex}`,
          label: option.label || `选项 ${optIndex + 1}`,
          score: typeof option.score === 'number' ? option.score : 1,
          sort: typeof option.sort === 'number' ? option.sort : (optIndex + 1) * 10
        };
      });
    }
    
    return processedQuestion;
  });
  
  return processed;
};

const handleUpload = () =>{
    // 验证问卷数据
    if (!widgetForm.value.list || widgetForm.value.list.length === 0) {
      message.warning('请先添加问题后再发布问卷');
      return;
    }
    
    if (!widgetForm.value.config || !widgetForm.value.config.title) {
      message.warning('请先设置问卷标题后再发布');
      return;
    }
    
    // 上传时使用经过预处理的数据
    let processedObj = removeJsonProperties(widgetForm.value, [
      'inline', 'remote', 'showLabel', 'disabled', 'enum', 
      'message', 'pattern', 'remoteOptions', 'width', 'autoSize', 
      'readonly', 'hideRequiredMark', 'layout', 'labelAlign', 
      'labelCol', 'size'
    ]);
    
    // 进一步处理数据格式以符合 API 期望
    processedObj = preprocessDataForApi(processedObj);
    
    // 显示处理后的JSON数据用于调试
    console.log("上传的处理后数据：", JSON.stringify(processedObj, null, 2));
    
    // 先显示精简后的数据，让用户确认后再上传
    Modal.confirm({
      title: '确认发布问卷',
      icon: createVNode(ExclamationCircleOutlined),
      content: createVNode(
        'div',
        {
          style: 'max-height: 400px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; background: #f5f5f5; padding: 10px; border-radius: 4px; margin-top: 10px;',
        },
        [
          createVNode('div', { style: 'margin-bottom: 10px; font-family: inherit; color: #333;' }, `问卷标题：${processedObj.config.title || '未设置'}`),
          createVNode('div', { style: 'margin-bottom: 10px; font-family: inherit; color: #333;' }, `问题数量：${processedObj.list.length}个`),
          createVNode('div', { style: 'margin-bottom: 10px; font-family: inherit; color: #666;' }, '以下是将要上传的数据结构：'),
          JSON.stringify(processedObj, null, 2)
        ]
      ),
      onOk() {
        // 设置加载状态
        uploadLoading.value = true;
        
        // 显示上传进度提示
        const hideLoading = message.loading('正在发布问卷，请稍候...', 0);
        
        // 用户确认后执行上传
        return request({
          url:import.meta.env.VITE_API_BASE_URL+ '/QuestionnaireApi.php',
          method: 'POST',
          data: processedObj,
        }).then(response => {
          // 隐藏加载提示
          hideLoading();
          uploadLoading.value = false;
          
          // 验证API响应格式
          const validation = validateApiResponse(response);
          if (!validation.valid) {
            message.error(`响应格式错误: ${validation.error}`);
            console.error('响应格式错误:', response);
            throw new Error(validation.error);
          }
          
          // 适配新的API返回格式 {code, message, data}
          if (response.code === 200) {
            // 成功提示，显示问卷ID
            const successMsg = response.data && response.data.surveyID 
              ? `${response.message} (问卷ID: ${response.data.surveyID})`
              : response.message || '问卷发布成功';
            
            message.success(successMsg, 6); // 显示6秒
            console.log('上传成功:', response);
            
            if (response.data && response.data.surveyID) {
              console.log('问卷ID:', response.data.surveyID);
              // 可以在这里添加跳转到问卷管理页面的逻辑
              // 例如: router.push(`/questionnaire/manage/${response.data.surveyID}`);
            }
            return response;
          } else {
            // API返回错误码，提供更详细的错误信息
            let errorMsg = `发布失败 (错误码: ${response.code})`;
            
            if (response.message) {
              errorMsg += `: ${response.message}`;
            }
            
            // 根据错误码提供具体的解决建议
            if (response.code === 400) {
              errorMsg += `
请检查问卷数据格式是否正确`;
            } else if (response.code === 500) {
              errorMsg += `
服务器内部错误，请稍后重试`;
            }
            
            message.error(errorMsg, 8);
            console.error('API返回错误:', response);
            throw new Error(response.message || '未知错误');
          }
        }).catch(error => {
          // 隐藏加载提示
          hideLoading();
          uploadLoading.value = false;
          
          // 详细的错误处理
          if (error.code === 'ERR_NETWORK') {
            // 网络连接错误
            Modal.confirm({
              title: '网络连接失败',
              icon: createVNode(ExclamationCircleOutlined),
              content: createVNode(
                'div',
                {},
                [
                  createVNode('p', {}, '无法连接到服务器，可能的原因：'),
                  createVNode('ul', { style: 'margin: 10px 0; padding-left: 20px;' }, [
                    createVNode('li', {}, '网络连接不稳定'),
                    createVNode('li', {}, '服务器暂时不可用'),
                    createVNode('li', {}, '防火墙或代理设置阻止了连接'),
                  ]),
                  createVNode('p', {}, '是否要重试发布？')
                ]
              ),
              okText: '重试',
              cancelText: '取消',
              onOk() {
                // 递归调用重试
                handleUpload();
              }
            });
          } else if (error.response && error.response.data) {
            // 如果是HTTP错误响应，尝试解析错误信息
            const errorData = error.response.data;
            if (errorData.code && errorData.message) {
              message.error(`发布失败 (错误码: ${errorData.code}): ${errorData.message}`, 8);
            } else {
              message.error('问卷发布失败，请重试');
            }
            console.error('API错误响应:', errorData);
          } else if (error.message) {
            // 其他错误
            if (error.message.includes('timeout')) {
              message.error('请求超时，请检查网络连接后重试', 6);
            } else {
              message.error(`发布失败: ${error.message}`, 6);
            }
          } else {
            message.error('未知错误，请重试', 6);
          }
          
          console.error('上传失败详情:', {
            message: error.message,
            code: error.code,
            config: error.config,
            response: error.response
          });
          throw error;
        });
      },
      onCancel() {
        console.log('上传已取消');
      },
      width: 800,
      okText: '确认上传',
      cancelText: '取消',
    });
}

// 保存稿件功能
const handleSaveDraft = () => {
  try {
    // 获取完整的JSON数据
    const completeJsonData = JSON.stringify(widgetForm.value, null, 2);
    
    // 创建Blob对象
    const blob = new Blob([completeJsonData], { type: 'application/json' });
    
    // 创建下载链接
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    
    // 生成文件名（包含时间戳）
    const now = new Date();
    const timestamp = now.getFullYear() + 
      String(now.getMonth() + 1).padStart(2, '0') + 
      String(now.getDate()).padStart(2, '0') + '_' +
      String(now.getHours()).padStart(2, '0') + 
      String(now.getMinutes()).padStart(2, '0') + 
      String(now.getSeconds()).padStart(2, '0');
    
    link.download = `questionnaire_draft_${timestamp}.json`;
    
    // 触发下载
    document.body.appendChild(link);
    link.click();
    
    // 清理
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
    
    message.success('稿件保存成功！');
  } catch (error) {
    message.error('稿件保存失败，请重试');
    console.error('保存失败:', error);
  }
}

// 网络测试功能
const handleNetworkTest = async () => {
  const hideLoading = message.loading('正在测试网络连接...', 0);
  
  try {
    // 测试基本网络连接 - 使用 GET 请求测试 API 状态
    const startTime = Date.now();
    const response = await request({
      url: '/QuestionnareApi.php',
      method: 'get',
      baseURL: 'https://wxapi.xiaoyiwl.cn',
      timeout: 10000
    });
    const endTime = Date.now();
    const responseTime = endTime - startTime;
    
    hideLoading();
    
    Modal.success({
      title: '网络连接正常',
      content: createVNode(
        'div',
        {},
        [
          createVNode('p', {}, `服务器响应时间: ${responseTime}ms`),
          createVNode('p', {}, '网络连接状态: 正常'),
          createVNode('p', { style: 'color: green;' }, '可以正常发布问卷')
        ]
      )
    });
    
  } catch (error) {
    hideLoading();
    
    let errorMessage = '网络连接测试失败';
    let suggestions = [];
    
    if (error.code === 'ERR_NETWORK') {
      errorMessage = '无法连接到服务器';
      suggestions = [
        '检查网络连接是否正常',
        '确认防火墙设置',
        '尝试刷新页面后重试'
      ];
    } else if (error.message.includes('timeout')) {
      errorMessage = '连接超时';
      suggestions = [
        '网络连接较慢，请稍后重试',
        '检查网络稳定性'
      ];
    } else {
      suggestions = [
        '请联系技术支持',
        '检查服务器状态'
      ];
    }
    
    Modal.error({
      title: errorMessage,
      content: createVNode(
        'div',
        {},
        [
          createVNode('p', {}, '建议解决方案:'),
          createVNode('ul', { style: 'margin: 10px 0; padding-left: 20px;' }, 
            suggestions.map(suggestion => 
              createVNode('li', {}, suggestion)
            )
          ),
          createVNode('p', { style: 'color: #666; font-size: 12px; margin-top: 10px;' }, 
            `错误详情: ${error.message || error.code || '未知错误'}`
          )
        ]
      )
    });
  }
};

// 确保数据更新
watch(
  () => widgetForm.value, 
  (newVal) => {
    generateJsonTemplate.value = JSON.stringify(newVal, null, 2); // 实时更新JSON字符串
  },
  { deep: true }
);


// 监听本父组件和其他子组件的双向绑定数据变化 作调试使用
watch(() => widgetForm.value.list, (newList) => {
  console.log('父组件 widgetForm.list 变化:', newList); // 现在会触发
},
  { deep: true } // 监听数组内部元素变化（如新增、删除、排序）
)

//同上
watch(() => widgetFormSelect.value, (newValue) => {
  console.log('父组件 widgetFormSelect ');

})
</script>

<style scoped lang="less">
.header-menu {
  margin-right: 20px;
  transition: all 0.3s ease;
  cursor: pointer;

  &:last-child {
    margin-right: 0;
  }

  &.loading {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    
    &::after {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-left: 8px;
      border: 2px solid #1890ff;
      border-top: 2px solid transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }

  &:hover:not(.loading) {
    color: #1890ff;
    transform: translateY(-1px);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.form-builder {
  display: flex;
  height: 100vh;

  .widget-panel {
    width: 275px;
    height: 100vh;
    background-color: #fff;
    height: 100vh;
    border-right: 1px solid #ccc;
    overflow: hidden;

    h2 {
      font-weight: normal;
      margin: 20px;
    }
  }

  .canvas-area {
    flex: 1;
    height: 100vh;
    overflow: auto;
  }

  .property-panel {
    width: 275px;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    padding-left: 20px;
    border-left: 1px solid #ccc;
  }
}

.tab-pane {
  height: 100%;
}
</style>